<template>
  <div>
    <!-- <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="中流程" :prop="!checked ? 'medium' : ''">
        <el-select v-model="checked ? tempMedium : form.medium" placeholder="请选择" :disabled="checked"
          :placeholder="checked ? '请选择子流程' : '请选择中流程'">
          <el-option v-for="item in mediumOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-checkbox v-model="checked" @change="checkBoxChange">自定义</el-checkbox>
      <el-form-item label="" :prop="checked ? 'medium' : ''" :key="checked">
        <el-select v-model="!checked ? tempMedium : form.medium" placeholder="请选择" :disabled="!checked"
          @change="childrenChange">
          <el-option v-for="item in selfOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <div v-if="form.medium == 5">
        <el-form-item label="" prop="children">
          <el-select v-model="form.children" placeholder="请选择">
            <el-option v-for="item in childrenOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
    </el-form> -->
    <!-- 查看 -->
    <!-- <el-image 
    style="width: 100px; height: 100px;transform: translateX(-40px);"
    :src="url" z-index="100"
    :preview-src-list="srcList">
    
  </el-image> -->
  查看图片
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ],
      form: {
        medium: '',
        children: ''
      },
      tempMedium: null,
      checked: false,
      mediumOptions: [{
        value: '1',
        label: '华为'
      }, {
        value: '2',
        label: '小米'
      }, {
        value: '3',
        label: '苹果'
      }],
      selfOptions: [{
        value: '4',
        label: '没有子流程'
      }, {
        value: '5',
        label: '有子流程'
      }],
      childrenOptions: [{
        value: '6',
        label: '子流程1号'
      },
      {
        value: '7',
        label: '子流程2号'
      }

      ],
      rules: {
        medium: [{
          required: true,
          message: '请设置活动规则',
          trigger: 'blur'
        },],
        children: [{
          required: true,
          message: '请选择子流程',
          trigger: 'blur'
        },]
      }
    }
  },
  methods: {
    checkBoxChange(e) {
      this.form.medium = '';
      this.tempMedium = '';
      this.form.children = '';
      // this.
    },
    childrenChange(e) {
      if (e === '4') {
        this.form.children = '';
      }
    },
    handleSubmit() {
      console.log(this.$refs.form)
      this.$refs.form.validate(valid => {
        //表单验证失败
        if (!valid) {
          //提示语
          this.$message("未设置活动规则");
          return false;
        } else {
          this.$message("成功");
          console.log(this.form)
        }
        //这里可以写表单验证通过之后执行的代码
        //.......
      });
    }
  }

}
</script>

<style scoped lang="scss"></style>